<template>
  <div class="aside">
    <el-row>
      <div class="logo" @click="$router.push({path:'/'})">
        <img src="../../assets/icon2.png" alt="" style="margin-top:8px;">
      </div>
      <h5>Delivery Of Goods System</h5>
    </el-row>
    <el-row style="margin-top:40px;">
      <template v-for="(item,i) in fun">
        <Selector :tagname="item" :active="select===i" :i=i @clicki="setSel(i)"></Selector>
      </template>
    </el-row>
    <el-row id="aside-footer">
      <!--<p>Copy ©2018 Created by Chzh 14ch.cn</p>-->
    </el-row>
  </div>
</template>

<script>
  import Selector from '../GDAside/GDAsideSelector'

  export default {
    name: "GDAside",
    components: {
      Selector
    },
    data() {
      return {
        // select:0,
      }
    },
    methods: {
      setSel(i) {
        this.$store.commit('setSel', i);
        // this.select=i;
      }
    },
    mounted() {
      this.$store.commit('setSel', 0);
    },
    computed: {
      select() {
        return this.$store.state.select;
      },
      fun() {
        return this.$store.state.fun;
      }
    }
  }
</script>

<style scoped>
  .aside {
    height: 100%;
    width: 100%;
    background: #1c2533;
    color: #d1d1d1;
    line-height: normal;
    user-select: none;
    box-shadow: inset -1px 0 1px #8b8b8b;
  }

  #aside-footer {
    position: absolute;
    bottom: 5px;
    width: 250px;
    color: #fff;
    font-size: 12px;
    font-weight: 100;
  }

  h5 {
    margin-top: 20px;
    padding: 0;
  }

  .logo {
    background: #4e4e4e;
    border: 2px solid #fff;
    box-shadow: 0 0 20px #8d8d8d, inset 0 0 80px 5px #1c2533;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    color: #fff;
    line-height: 80px;
    font-size: 60px;
    overflow: hidden;
    font-family: fantasy;
    text-shadow: 0 0 4px #000;
    cursor: pointer;
    transition: all 0.5s ease;
  }

  .logo:hover {
    background: #929292;
  }
</style>
